<!-- 关于弹窗页面 -->

<script setup lang="ts">
import { ref,onMounted } from 'vue'

//渲染完DOM后
onMounted(()=>{
	//获取服务器地址
	RequestAddress.value=uni.getStorageSync('RequestAddress');
})
// 定义触发给父组件的事件，用于通知主页面确定按钮被点击
const emit = defineEmits(['confirm-clicked'])
// 点击确定按钮时触发的函数
const Information = () => {
    // 显示提示信息，提示用户操作已确认
    uni.showToast({
        title: '确定',
        icon: 'success',
        duration: 500
    })
    // 触发事件，通知主页面确定按钮被点击
    emit('confirm-clicked')
}
//服务器地址
let RequestAddress=ref<string>();

//正在下载加载进度
let fsfsds=ref<number>(0);

//显示进度条
let isschedule=ref<boolean>(false);
//显示已经是最新版本
let isversions=ref<boolean>(false);
//显示立即更新
let isbotton=ref<boolean>(false);
//检查更新isGXbotton
let isGXbotton=ref<boolean>(true);

const appurl="https://res.viayoo.com/v1/via-release-cn.apk"

//检查更新按钮
const checkforupdates=()=>{
	
	
	
	
	console.log("检查更新");
	//  #ifdef APP
	 const systemInfo = uni.getSystemInfoSync();
	 console.log(systemInfo.platform);
	 console.log(process.env.VUE_APP_PLATFORM);
	 if(systemInfo.platform === 'android' && process.env.VUE_APP_PLATFORM === 'app'){
		 console.log("安卓app");
		 plus.runtime.getProperty(plus.runtime.appid, (widgetInfo)=> {
		 const  currentVersion = widgetInfo.version;
		   console.log("当前版本", currentVersion);
		   
		   //获取后端本版号接口
		   updatesApp().then((res:any)=>{
			   if(res.statusCode===200){
				   //判端版本号
				 if( compareVersion(currentVersion,res.data.appnumber)) {
					 isGXbotton.value=false;
					 isbotton.value=true;
					
					 
					 
				 }
			   }
		   });
		 });  
	 }
	// #endif
}

//获取后端本版号接口
const updatesApp=()=>{
	console.log("获取后端本版号接口")
	// return uni.request({
	//     url: '/login',
	//     method: 'POST',
	//     data: {
	//         username,
	//         password
	//     }
	// });
	return new Promise((resolve, reject) => {
	    // 模拟登录成功
	    setTimeout(() => {
	        resolve({
	            statusCode: 200,
	            data: {
	                
						appnumber:"1.0.1"
	            }
	        });
	    }, 500);
	});
}

//比较版本
const compareVersion=(appnuber:any,newappnumber:any)=>{
	console.log("检查版本")
	const current  = appnuber.split('.');
	const latest  = newappnumber.split('.');
	  for (let i = 0; i < latest.length; i++) {
	            if (parseInt(latest[i]) > (parseInt(current[i]) || 0)) {
					uni.showToast({
					  title: '有新版本',
					  icon: 'none', // 不显示图标
					  duration: 1000,
					  mask: true // 遮罩层阻止用户操作
					});
					console.log("有新版本")
	                return true;
	            } else if (parseInt(latest[i]) < (parseInt(current[i]) || 0)) {
					isversions.value=true;isGXbotton
					isGXbotton.value=false;
					console.log("已经是最新版本")
	                return false;
	            }
	        }
			return false;
}

//下载安装包
const downloadAndUpdateApp=(apkUrl:any)=>{
		 console.log("进入下载安装包", plus.os.name);
		 isbotton.value=false;
		 isGXbotton.value=false;
		 isschedule.value=true;
	  const downloadTask= uni.downloadFile({
	    url: apkUrl//下载资源的 url
		,timeout:3000//超时时间，单位 ms
		,filePath:"_doc/update/aap.apk", //指定文件下载后存储的路径 (本地路径)
	    success: function (downloadResult) {
	        if (downloadResult.statusCode === 200) {
	            // 下载成功，这里可以进行安装操作，以安卓为例
				console.log("下载完成");
				console.log(downloadResult);
	            plus.runtime.install(downloadResult.tempFilePath, { force: true }, () => {
	                uni.showToast({ title: '安装成功，即将重启', icon: 'none' });
	                // 安装完成后重启App
	                setTimeout(() => {
	                    // plus.runtime.restart();
	                }, 1500);
	            }, (error) => {
	                uni.showModal({
	                    title: '安装失败',
	                    content: `错误原因：${error.message}`,
	                    showCancel: false
	                });
	            });
	        }
	    },
	    fail: function (err) {
	        console.log('下载失败', err);
	    }
	});
	
	// 监听进度并更新UI
	downloadTask.onProgressUpdate((res) => {
	  console.log('下载进度' + res.progress);
	  fsfsds.value=res.progress;
	  // 调试用
	  console.log(`下载中：${res.progress}%`);
	});

}
const cketbottom=()=>{
	//下载安装包
	 downloadAndUpdateApp(appurl);
}
	

</script>

<template>
    <view class="Information">
        <!-- 头像部分和输入框部分 -->
        <view class="Information-content">
            <!-- 头像 -->
            <view class="Information-image">
                <image src="@/static/icon/touxiang.png" mode="aspectFill" style="width: 100px; height: 100px;"></image>
            </view>
            <!-- 第一行文字 -->
            <view class="Information-text1">
                <text>当前账号：张三</text>
            </view>
            <!-- 第一个输入框 -->
            <view class="Information-input2">
				<view class="Information-label">
					<text>本机编码：</text>
				</view>
                <view class="input-wrapper">
                	<input  class="Information-input2-input2" type="text" placeholder="" />
                </view>
            </view>
            <!-- 第二个输入框 -->
            <view class="Information-input2">
				<view class="Information-label">
                <text>服务器地址：</text>
				</view>
				<view class="input-wrapper"> 
                	<input :disabled="true" class="Information-input2-input2" type="text" placeholder="" />
                </view>
		    </view>
            <!-- 第三行文本 -->
            <view class="Information-text4">
                <text>当前版本：1.0.0</text>
            </view>
            <!-- 检查更新 -->
            <view class="Information-text4">	
				<view v-show="isGXbotton"  @click="checkforupdates">
                <image src="@/static/icon/gengxin.png" style="width: 20px; height: 20px; margin-right: 10px;"></image>
                <text>检查更新</text>
				</view>
				<view v-show="isschedule" >
				    <progress :percent="fsfsds" stroke-width="7"  style="width:220px;"/>
					<text style="margin-left: 5px;">{{fsfsds}}%</text>
				</view>
				<view v-show="isversions">
				    已经是最新版本
				</view>
				<view v-show="isbotton">
				    <button @click="cketbottom">立即更新</button>
				</view>
            </view>
			
			 <view class="progress-box" style="display: flex;">
			 
			 </view>
			
        </view>

        <!-- 确定按钮 -->
        <view class="Information-button">
            <view class="Information-button-button" @click="Information">确定</view>
        </view>
    </view>
</template>

<style scoped>
/* 这里可以添加样式 */
.Information {
    /* width: 300px; */
    background-color: rgb(253, 255, 255);
    border-radius: 20px;
}

.Information-content {
    /* width: 100%; */
    height: 100%;
    margin: 0px 25px;

    /* background-color: #fff; */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
}

/* 第一行 */
.Information-image {
    margin: 20px 0px;
    width: 100%;
    height: 100px;
    /* background-color: #c74646; */
    display: flex;
    justify-content: center;
}

/* 第一行 */
.Information-text1 {
    width: 100%;
    height: 30px;
    /* background-color: #5b1875; */
    display: flex;
    justify-content: center;
}
/* 标签样式 */
.Information-label {
    min-width: 80px; /* 设置最小宽度，确保不同长度的标签文本不会导致布局混乱 */
    text-align: right; /* 文本右对齐，使输入框对齐更美观 */
}
.Information-text1 text {
    font-size: 20px;
    color: #090909;
}

/* 输入框 */
.Information-input2 {
    width: 100%;
    height: 30px;
    /* background-color: #1d845e; */
    margin: 5px 0px;
    display: flex;
    justify-content: center;
    flex-direction: row;
	line-height: 35px;
	justify-content: space-between;
}

.Information-input2-input2 {
    padding: 0px 5px;
    width: 140px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
}

.Information-text4 {
    width: 100%;
    height: 30px;
    /* background-color: #1d845e; */
    margin: 5px 0px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.Information-text4 image {
    width: 20px;
    height: 20px;
}

.Information-button {
    padding-top: 20px;
    width: 100%;
    height: 40px;

    /* background-color: #1d845e; */
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.Information-button-button {
    width: 300px;
    color: rgb(51, 215, 234);
    border-top: 1px solid #b6b1b1;
    text-align: center;
    line-height: 40px;
}
</style>
